import { Button, Form, Input, Modal, Radio,message } from 'antd';
import React, { useState } from 'react';
import url from '../../../../config/url';
import req from '../../../../http/req'
const CollectionCreateForm = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm();
  return (
    <Modal
    
      visible={visible}
      title="添加内容"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            // console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
          name="username"
          label="大棚名称"
          rules={[
            {
              required: true,
              message: '请输入大棚名称!',
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>

      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
          name="mobile"
          label="手机号"
          rules={[
            {
              required: true,
              message: '请输入手机号!',
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>

      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
        
          name="password"
          label="密码"
          rules={[
            {
              required: true,
              message: '请输入密码!',
            },
          ]}
        >
          <Input type={'password'} />
        </Form.Item>
      </Form>

      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
          name="email"
          label="邮箱"
          rules={[
            {
              required: true,
              message: '请输入邮箱!',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="gender" className="collection-create-form_last-form-item">
          <Radio.Group>
            <Radio value="1">20%</Radio>
            <Radio value="2">30%</Radio>
            <Radio value="3">40%</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>

    </Modal>
  );
};

const Tianjia = () => {
  const [visible, setVisible] = useState(false);

  const onCreate = (values) => {
    // console.log('Received values of form: ', values);
    // console.log(values)
    values.mobile=values.mobile-0
    values.gender=values.gender-0
    req.post(url.PostUserAdd,values).then((res)=>{
      // console.log('res',res)
      if(res.data.errNo===0){
        message.success('添加成功');
      }else{
        message.warning('添加失败');
      }
    })
    setVisible(false);
  };

  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          setVisible(true);
        }}
      >
        添加
      </Button>
      <CollectionCreateForm
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
      />
    </div>
  );
};

export default Tianjia;